<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM Functions Test</title>
<script type="text/javascript" src="../src/core.js"></script>
<script type="text/javascript" src="../src/hash.js"></script>
<script type="text/javascript" src="../src/observable.js"></script>
<script type="text/javascript" src="../src/url.js"></script>
<script type="text/javascript" src="../src/ajax/ajax.js"></script>
<script type="text/javascript" src="../src/ajax/ajax-proxy.js"></script>
<script type="text/javascript" src="../src/ajax/js-http-request.js"></script>
<script type="text/javascript" src="../src/css.js"></script>
<script type="text/javascript" src="../src/dom/sizzle.js"></script>
<script type="text/javascript" src="../src/dom/collection.js"></script>
<script type="text/javascript" src="../src/dom/element.js"></script>
<script type="text/javascript" src="../src/dom/xml.js"></script>
<script type="text/javascript" src="../src/ready.js"></script>
<script type="text/javascript" src="../src/effects/fade.js"></script>
<script type="text/javascript" src="../src/effects/roll.js"></script>
<style>
.effects { width:20%;height:300px;background:#ccc;display:none }
</style>
</head>
<body>

<input type="button" onclick="show()" value="show" />
<input type="button" onclick="hide()" value="hide" />

<div class="effects">
1). blablabla;<br />
2). blahblahblah;<br />
3). bla-bla-bla;<br />
4). blah-blah-blah.
</div>

<div class="effects">
1). blablabla;<br />
2). blahblahblah;<br />
3). bla-bla-bla;<br />
4). blah-blah-blah.
</div>

<script>
function show() {
	Jsl( '.effects')
		.rollIn( 250)
		.fadeIn( 250)
	;
};
function hide() {
	Jsl( '.effects')
		.rollOut( 250)
		.fadeOut( 250)
	;
};
</script>
</body>
</html>
